<template>
  <div class="changer_order_container">
    <div class="mask"></div>
    <div class="new_vs">
      <div class="title">
        <span>改单(厂商付款结账)</span>
        <i
          class="el-icon-close"
          style="font-size: 20px"
          @click="closeIconClick"
        ></i>
      </div>
      <div class="table_wrap">
        <el-table
          :data="tableData"
          style="width: 100%"
          highlight-current-row
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '30px' }"
        >
          <el-table-column prop="sequence" label="付款序号"> </el-table-column>
          <el-table-column prop="manufacturerName" label="厂商">
          </el-table-column>
          <el-table-column prop="money" label="付款金额">
            <template slot-scope="scope">
              <el-input
                style="width: 100px"
                v-model="scope.row.money"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注"> </el-table-column>
          <el-table-column prop="sequenceTime" label="付款日期">
            <template slot-scope="scope">
              <span>{{ scope.row | formatTimeString('sequenceTime') }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="button_wrap">
        <el-button @click="closeIconClick">取消</el-button>
        <el-button type="primary" @click="handleUpdateClick">修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { updateMoney } from '@/request/accounting/ManufacturerPayment'
import { verifyNumber } from '@/util/regular'
import { deepClone } from '@/util/util'
export default {
  props: {
    rowData: {
      type: Object | String,
      require: true,
      default: () => {}
    }
  },
  data() {
    return {
      tableData: [],
      newRowData: {}
    }
  },
  created() {
    if (this.rowData) {
      const rowData = deepClone(this.rowData)
      this.newRowData = rowData
      this.tableData.push(rowData)
    }
  },
  methods: {
    // 修改
    async handleUpdateClick() {
      const money = Number(this.newRowData.money)
      if (!verifyNumber(money)) return this.$message.error('请输入正确的金额')
      const requestData = {
        money,
        sequence: this.newRowData.sequence
      }
      const { data } = await updateMoney(requestData)
      if (data && data.code === 200) {
        this.$message.success(data.msg)
        this.$emit('updateDataList')
        this.closeIconClick()
      }
    },
    closeIconClick() {
      this.$emit('closeOrderDialog')
    }
  }
}
</script>

<style lang="less" scoped>
/* 新建资料 */
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 9;
}
.new_vs {
  position: fixed;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  max-height: 800px;
  z-index: 99;
  background-color: white;
  overflow: auto;
}
.title {
  padding: 10px;
  width: 100%;
  height: 48px;
  background: #f8f8f8;
  font-weight: bold;
  color: #222222;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.table_wrap {
  padding: 10px;
}
.button_wrap {
  margin: 24px;
  display: flex;
  justify-content: flex-end;
}
</style>
